<template>
	<div class="listEditTableWrap">
		<template v-if="type == 'add'">
			<el-form inline>
				<!--label值-->
				<el-form-item label="表头名称：" required>
					<el-input
						v-model="labelData"
						placeholder="请输入表头名字"
						:maxlength="10"
						clearable
					></el-input>
				</el-form-item>
				<!--prop值-->
				<el-form-item label="列字段值：">
					<el-input
						v-model="propData"
						placeholder="请输入该列使用的字段名"
						:maxlength="20"
						clearable
					></el-input>
				</el-form-item>
			</el-form>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
				<el-button @click="addTableList" type="primary">添加</el-button>
			</div>
		</template>
		<template v-if="type == 'delete'">
			<ul>
				<li class="deleteLi" v-for="(item,index) in tableArray" :key="index">
					<span class="deleteLabel">{{item.label}}</span>
					<el-button @click="deleteMet(item,index)" type="danger" size="small">删除</el-button>
				</li>
			</ul>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
			</div>
		</template>
		<template v-if="type == 'deleteOperatinBtn'">
			<ul>
				<li class="deleteLi" v-for="(item,index) in tableConfig.operationBtn" :key="index">
					<span class="deleteLabel">{{item.name}}</span>
					<el-button @click="deleteOpeBtnMet(item,index)" type="danger" size="small">删除</el-button>
				</li>
			</ul>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
			</div>
		</template>
		<template v-if="type == 'set'">
			<el-checkbox @change="changeSelectMet" v-model="tableConfig.selection" label="多选" border />
			<el-checkbox @change="changeSelectMet" v-model="tableConfig.orderNumber" label="序号" border />
			<el-checkbox @change="changeOperaMet" v-model="tableConfig.operation" label="操作" border />
			<template v-if="tableConfig.operation">
				<list_edit_tableFunction ref="tableOperaBtn"></list_edit_tableFunction>
			</template>
			<div class="btnArea">
				<el-button @click="cancelTem">关闭</el-button>
                <el-button
					v-if="tableConfig.operation"
					@click="confrimTem"
					type="primary">
					添加
				</el-button>
			</div>
		</template>
	</div>
</template>
<script type="text/javascript">
	import list_edit_tableFunction from '@/components/pageFunction/list_edit_tableFunction.vue';
	export default{
		props:{
			type:""
		},
		data () {
			return {
				labelData:"",
				propData:"",
				tableArray:[],
				tableConfig:{
					selection:"",
					operation:"",
					operationBtn:[],
					orderNumber:""
				}
			}
		},
		async created (){
			if(this.type == 'delete'){
				const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
				this.tableArray = result.table;
			}else if(this.type == 'set'){
				const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
				this.tableConfig = result.tableConfig;
			}else if(this.type == 'deleteOperatinBtn'){
				const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
				this.tableConfig = result.tableConfig;
			}
        },
        watch:{
            
        },
		components : {
			list_edit_tableFunction
		},
		methods : {
			cancelTem(){
				this.$mitt.emit("closeEditComponent");
			},
			async addTableList(){
				if(this.labelData == "" || this.propData == ''){
					this.$message.error('请输入必填字段！');
					return;
				}
				//修改json数据到json文件
				var params = {
					"label":this.labelData,
					"prop":this.propData
				}
				await this.$util.native.addTableList(this.$pinia.state.value.routeConfig.nowItem,params);
				//刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
				//重置选择框数据
				this.resetAdd();
			},
			async deleteMet(item,index){
				this.tableArray.splice(index,1);
				//删除表格某一项
				await this.$util.native.deleteTableList(this.$pinia.state.value.routeConfig.nowItem,index);
				//刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
			},
			async changeSelectMet(){
				//更新表格配置
				await this.$util.native.updateTableList(this.$pinia.state.value.routeConfig.nowItem,this.tableConfig);
				//刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
			},
			//取消操作列
			changeOperaMet(){
				if(!this.tableConfig.operation){
					this.tableConfig.operationBtn = [];
					this.changeSelectMet();
				}
			},
			//操作列，添加按钮
			confrimTem(){
				var btnItem = this.$refs.tableOperaBtn.btnItem;
				if(this.tableConfig.operation){
					if(typeof btnItem.name == 'undefined' || btnItem.name == ''){
						this.$message.error("请输入操作栏按钮名称");
						return
					}
					this.tableConfig.operationBtn.push(btnItem);
					this.$refs.tableOperaBtn.resetData();
					this.changeSelectMet();
				}
			},
			//删除操作列按钮
			deleteOpeBtnMet(item,index){
				this.tableConfig.operationBtn.splice(index,1);
				this.changeSelectMet();
			},
			resetAdd(){
				this.labelData = "";
				this.propData = "";
			},
		}
	}
</script>
<style type="text/css" lang="less">
	.listEditTableWrap{
        width: 300px;
		.el-form-item{
			width: 100%;
			margin-right: 0px;
		}
		.el-form-item__label{
			width: 32%;
		}
		.el-form-item__content{
			min-width:0px;
		}
		.btnArea{
			margin-top: 20px;
            .el-button{
                width: 25%;
            }
        }
		.deleteLi{
			border-bottom:1px solid #E5E6EC;
			height: 50px;
			.deleteLabel{
				font-size: 14px;
				line-height:50px;
			}
			.el-button{
				float: right;
				margin-top: 9px;
			}
		}
    }
</style>